<template>
  <div class="login-container">
    <!-- 左侧 -->
    <div class="login-left-container">
      <div class="logo-container">
        <img src="../../assets/logo_name.png" />
      </div>
<!--      <div class="watchword">启程，助力企业品质出行</div>-->
      <div class="watchword">车辆运营管理系统</div>
<!--      <div class="system">运营管理系统</div>-->
<!--      <div class="contact-us">-->
<!--        <p>www.qichengcx.com</p>-->
<!--        <p style="margin-left: 24px">服务热线：400-021-2660</p>-->
<!--      </div>-->
<!--      <div class="copyright"> Copyright 2021- {{ new Date().getFullYear() }}{{ copyright }} </div>-->
    </div>
    <!-- 右侧 -->
    <div class="login-right-container">
      <AppDownload />
      <div class="form-container">
        <!-- 密码登录 -->
        <PwdLogin v-if="activeIndex == 1" @changeIndex="changeIndex" @login2GetUser="login2GetUser" />
        <!-- 忘记密码 -->
        <ForgetSmscode v-else-if="activeIndex == 2" @changeIndex="changeIndex" />
        <!-- 重置密码 -->
        <ForgetReset v-else-if="activeIndex == 3" @changeIndex="changeIndex" :forgetForm="forgetForm" />
        <!-- 微信绑定 -->
        <WxBind v-else-if="activeIndex == 5" :openid="wxOpenid" @changeIndex="changeIndex" @login2GetUser="login2GetUser" />
        <!-- 微信登录 -->
        <WxLogin ref="wxLoginRef" v-show="activeIndex == 4" @changeIndex="changeIndex" />
        <!-- 安全验证 -->
        <SecurityVerification
          v-if="activeIndex == 6"
          :securityVerificationForm="securityVerificationForm"
          @changeIndex="changeIndex"
          @login2GetUser="login2GetUser"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
  import { watch, ref, onMounted } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { getWxQrLoginResult } from '@/api/user'
  import { Message } from '@arco-design/web-vue'
  import useUserStore from '@/store/modules/user'
  import useVisitedRouteStore from '@/store/modules/visited-routes'
  import { copyright } from '../../setting'
  import ForgetSmscode from './components/forget-smscode.vue'
  import ForgetReset from './components/forget-reset.vue'
  import PwdLogin from './components/pwd-login.vue'
  import WxLogin from './components/wx-login.vue'
  import WxBind from './components/wx-bind.vue'
  import AppDownload from './components/app-download.vue'
  import SecurityVerification from './components/security-verification.vue'

  const router = useRouter()
  const route = useRoute()
  const userStore = useUserStore()
  const visitedRouteStore = useVisitedRouteStore()

  const login2GetUser = () => {
    console.log('🐳 > login2GetUser > log: 登录成功')
    // 清空标签页
    visitedRouteStore.closeAllVisitedView()
    userStore.setUser().then((userInfo) => {
      router
        .replace({
          path: route.query.redirect ? route.query.redirect : '/',
        })
        .then(() => {
          Message.success('登录成功，欢迎：' + userInfo.realName)
        })
    })
  }

  // 切换登录方式
  const activeIndex = ref(1)
  const forgetForm = ref({})
  const securityVerificationForm = ref({
    // userName: 'liuweigang',
    // password: 'liuweigang@123',
    // encryptionPhoneNumber: '1337',
  })
  const changeIndex = (index, form) => {
    activeIndex.value = index
    if (form) forgetForm.value = form
    // 安全验证
    if (index == 6) {
      securityVerificationForm.value = form
    }
  }

  // 获取微信二维码登录结果
  const wxOpenid = ref('')
  const wxLoginRef = ref()
  const getWxQrLoginResultFn = (data) => {
    // const data = route.query
    console.log('🐳 > getWxQrLoginResultFn > data:', data)
    // router.replace({ path: '/', query: {} })
    if (!data.code) return
    getWxQrLoginResult(data).then((res) => {
      if (res.code == 200) {
        const { status, message } = res.result
        wxOpenid.value = message
        // status：true 已绑定 false 未绑定
        if (status) {
          // 登录成功进入首页
          login2GetUser()
        } else {
          // 去微信号绑定账号
          activeIndex.value = 5
        }
      } else {
        wxLoginRef.value.initWxQrcode()
      }
    })
  }

  watch(
    () => route.query,
    (v, new_v) => {
      console.log('🐳 > v, new_v:', v, new_v, route)
      // 获取微信二维码登录结果
      getWxQrLoginResultFn(v)
    },
    {
      immediate: true,
    }
  )
  onMounted(() => {
    console.log('🐳 > onMounted > route-data,data:', route.query)
    // // 获取微信二维码登录结果
    // getWxQrLoginResultFn(route.query)
  })
</script>

<style lang="less" scoped>
  .login-container {
    position: relative;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: flex-start;
    .login-left-container {
      width: 42vw;
      height: 100vh;
      background-image: url('@/assets/login_bg_img.png');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      .logo-container {
        margin-top: 40px;
        //padding-left: 40px;
        img {
          width: 400px;
          height: 160px;
        }
      }
      .watchword {
        height: 48px;
        font-size: 42px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: purple;
        line-height: 48px;
        letter-spacing: 4px;
        margin-top: 174px;
        text-align: center;
      }
      .system {
        width: 184px;
        height: 40px;
        background: #ffffff;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        margin: 17px auto;
        font-size: 20px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #1a76f8;
        line-height: 40px;
        text-align: center;
      }
      .contact-us {
        display: flex;
        justify-content: center;
        height: 22px;
        font-size: 12px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 22px;
        position: absolute;
        bottom: 63px;
        left: calc(16vw - 140.49px);
      }
      .copyright {
        height: 22px;
        font-size: 12px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 22px;
        text-align: center;
        margin-top: 5px;
        position: absolute;
        bottom: 32px;
        left: calc(16vw - 134.35px);
      }
    }
    .login-right-container {
      box-sizing: border-box;
      padding: 42px 50px;
      width: 68vw;
      height: 100vh;
      background: #ffffff;
      border-radius: 0px 0px 0px 0px;
    }
    .form-container {
      padding-top: 132px;
    }
  }
  .wx_login {
    margin: 24px 0 10px;
    .wx_text {
      width: 100%;
      display: flex;
      align-items: center;
      .line {
        flex: 1;
        background: #d9d9d9;
        height: 1px;
      }
      .text {
        margin: 0 10px;
        font-weight: 400;
        font-size: 12px;
        color: #b1b6c0;
        line-height: 22px;
      }
    }
    .wx_logo {
      margin-top: 10px;
      text-align: center;
      img {
        cursor: pointer;
      }
    }
  }
</style>
